/**
* 基础菜单 用户管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 详情模态框 -->
    
      <template>
        <el-tabs v-model="activeName" >
          <el-tab-pane label="基本信息" name="1">
              <template>
                <el-row class="demo-avatar demo-basic">
                  <el-col :span="12">
                    <div class="demo-basic--circle">
                      <div class="block"><el-avatar shape="square" :size="80" >
                        <img :src="image" />
              
                      </el-avatar>
                        
                      </div>
                    </div>
                  </el-col> 
                </el-row>
              </template> 
            <el-descriptions class="margin-top" title="基础信息" :column="2" size="medium" border>
              <el-descriptions-item label="姓名：" >{{staffinfo.username}}</el-descriptions-item>
              <el-descriptions-item label="性别：">{{staffinfo.sex}}</el-descriptions-item>
              <el-descriptions-item label="电话：" >{{staffinfo.phone}}</el-descriptions-item>
              <el-descriptions-item label="邮箱：">{{staffinfo.email}}</el-descriptions-item>
              <el-descriptions-item label="家庭住址：" >{{staffinfo.address}}</el-descriptions-item>
            </el-descriptions>
            <br>
            <el-descriptions class="margin-top" title="其他" :column="2" size="medium" border>
              <el-descriptions-item label="创建时间：" >{{staffinfo.createtime}}</el-descriptions-item>
              <el-descriptions-item label="最后一次修改人：" >{{staffinfo.updateName}}</el-descriptions-item>
              <el-descriptions-item label="最后一次修改时间：">{{staffinfo.updatetime}}</el-descriptions-item>
            </el-descriptions>
            <br>
          </el-tab-pane>
        </el-tabs>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="update">修 改</el-button>
        <el-button type="success" @click="$router.push('/information/UserInf')">返回上一页</el-button>
      </span>
      <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="姓名" >
          <el-input v-model="editForm.username" placeholder="请输入姓名" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-input v-model="editForm.sex" placeholder="请输入性别" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="editForm.phone" placeholder="请输入电话" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" >
          <el-input v-model="editForm.email" placeholder="请输入邮箱" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="地址" >
          <el-input v-model="editForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer" style="width:300px">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="okModel">确定
        </el-button>
      </div>
      
      </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "修改",
      image:"",

      depart_arr: [], // 这个为部门下拉框的 选项
      educatioin_arr: [{id:1,eduName:'本科'},{id:2,eduName:'专科'},{id:3,eduName:'中专'},{id:4,eduName:'高中'}], // 这个为学历的下拉框选项
      position_arr: [], // 这个为职位的下拉框选项
      staffsort_arr:[{id:1,sortname:'在职'},{id:2,sortname:'离职'}] ,//在职状态
      workstatus_arr:[{id:1,statusname:'正式工'},{id:2,statusname:'试用工'},{id:3,statusname:'实习生'}], //在职状态



      //控制详情外层模态框是否弹出
      getDetail: false,

      //详情模态框姓名参数

      createName:"",
      updateName:"",
      staffinfo:{
            id:"",
            username:"tom",
            phone:"12345678901",
            sex:"男",
            userimg:"",
            email:"123456789@qq.com",
            address:"嘿嘿嘿嘿嘿嘿嘿嘿和",
            createtime:"2021-12-16",
            updatetime:"2021-12-18",
            updatorid:"2",
            contractId:"4564",
            updateName:""
 },

        // editForm 用来装编辑/新增对话框上的数据，也是新增修改方法传递的参数
      editForm: {
        username:"",
        sex:"",
        phone:"",
        email:"",
        address:""
      },
         // rules表单验证
      rules: {
        staffName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        deptName: [
          {
            required: true,
            message: "请选择部门",
            trigger: "blur",
          },
        ],
        deptNo: [
          {
            required: true,
            message: "请选择职位",
            trigger: "blur",
          },
        ],
      },

      //设置Tabs标签页为第一页
       activeName: '1',

      //设置详情模态框头像路径
      squareUrl: ""
        
    };
  },
  // 注册组件
  components: {
    Pagination,
  },

  /**
   * 创建完毕 声明周期的钩子函数 由浏览器window窗口触发
   * 这个是自动会执行不是由我们的写的方法来执行
   */
  created() {
    this.getdata(this.staffinfo);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    update(){
      this.editFormVisible = true
      this.editForm.username=this.staffinfo.username
      this.editForm.sex=this.staffinfo.sex
      this.editForm.phone=this.staffinfo.phone
      this.editForm.address=this.staffinfo.address
      this.editForm.email=this.staffinfo.email
      
    },
    okModel(){
      this.editFormVisible = false
      this.$axios.post("/api/user/updateUser",{
        id:this.$route.query.id,
        username:this.editForm.username,
        sex:this.editForm.sex,
        phone:this.editForm.phone,
        address:this.editForm.address,
        email:this.editForm.email
      }).then(res=>{
        if(res.data.code == 200){
          console.log("修改成功")
          this.getdata();
        }
      })
     
    },

   findAllByDepartmentId(){
      //去后端根据部门名字查出所有的职位信息，塞进position_arr（职级选项）
      console.log(this.editForm.dept.deptName);
      this.editForm.level.levelName="",
        this.$axios
          .post("/api/Position/findPositionBydepartmentName",this.editForm.dept.deptName)
          .then((res) => {
            if (res.data.status == 200) {
              console.log("afafasfa",res);
              this.position_arr = res.data.data
              // this.listData = res.data.data;
            }
          })
          .catch((err) => {});
      },
    
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    detail(row){
        //模态框打开
        this.getDetail = true;
        //设置每次打开详情模态框时，tabs标签页为第一页
        this.activeName = '1';
        //刷新数据
        this.getdata();
    },

    // 获取个人信息
    getdata() {
      this.loading = true,
      this.$axios.post("/api/user/findOne/",{id: this.$route.query.id})
          .then((res) => {
            if (res.data.code == 200) {
              this.staffinfo.username=res.data.data.username,
              this.staffinfo.phone=res.data.data.phone,
              this.staffinfo.sex=res.data.data.sex,
              this.staffinfo.email=res.data.data.email,
              this.staffinfo.address=res.data.data.address,
              this.staffinfo.createtime=res.data.data.createTime,
              this.staffinfo.updatetime=res.data.data.updateTime,
              this.staffinfo.creatorid=res.data.data.creatorid,
              this.staffinfo.updatorid=res.data.data.updatorid,
              this.staffinfo.contractId=res.data.data.contractId
              this.image=res.data.data.userImage
                 //后端将查出的创建人id去查询名字
          
            }else{

            }
          })
          .catch((err) => {
            // 这些代码用于权限控制
          //   setTimeout(() => {
          //   this.$store.commit('logout', 'false')
          //   window.localStorage.clear;
          //   this.$router.push({ path: '/login' })
          //   this.$message({
          //     type: 'success',
          //     message: '已退出登录!'
          //   })
          // }, 400)
          });


       

      this.loading = false;
    },

    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },

    closeDialog2() {
      this.getDetail = false;
    },
   
  },
};
</script>

<style scoped>

.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>
